背景・余白を加える

スクロールに背景・余白を加える

スクロールの背景を決める
<marquee bgcolor="">～</marquee >

「bgcolor」属性を組み合わせることで、スクロールの背景が変わります。
「=""」にいれる属性値は「色の名前」か「ＲＧＢ値」です。

「#ff9900」でのスクロール背景です。
「<marquee bgcolor="#ff9900">オレンジっぽい背景</marquee>」

オレンジっぽい背景

スクロールの余白を決める
<marquee hspace="">～</marquee>（ヨコの余白）
<marquee vspace="">～</marquee>（タテの余白）

「hspace」「vspace」属性を組み合わせることで、スクロールの余白が変わります。
「=""」にいれる属性値は「数字」です。

「hspace」で左右に「100ピクセル」の余白を作ってみます。
「<marquee hspace="100" bgcolor="#ff9900" width="200">左右があきました</marquee>」

左右があきました

「vspace」で上下に「50ピクセル」の余白をつくってみます。
「<marquee vspace="50" bgcolor="#ff9900" width="200">上下があきました</marquee>」

上下があきました

【最後にちょっと応用】

こんな動き方もできる

「marquee」を2つ使ってサンドイッチ。

赤の部分でタテの往復と背景・幅・高さを、青の部分でヨコの往復を設定しています。
「<marquee behavior="alternate" direction="up" bgcolor="#ff9900" width="400" height="80">
　<marquee behavior="alternate">
　こんな動き方もできる
　</marquee>
　</marquee>」